<template>
  <div>
    <van-nav-bar title="个人信息">
      <img
        slot="left"
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        @click="leftClick"
        alt=""
      />
    </van-nav-bar>
    <div class="item">
      <P>姓名</P>
      <p>{{ userinfo.realname }}</p>
    </div>
    <div class="item">
      <P>手机号</P>
      <p>{{ userinfo.phone }}</p>
    </div>
    <div class="item">
      <P>系统编号</P>
      <p>{{ userinfo.userid }}</p>
    </div>
    <div class="item">
      <P>注册日期</P>
      <p>{{ userinfo.lastUpgradeTime }}</p>
    </div>
    <div class="item">
      <P>等级</P>
      <p>{{ userinfo.gradeName }}</p>
    </div>
    <div class="item">
      <P>实名状态</P>
      <template v-for="(item, index) in realnameStatus">
        <p v-if="item.type == userinfo.realnameStatus" :key="index">
          {{ item.name }}
        </p>
      </template>
    </div>
    <div class="item">
      <P>提现手续费</P>
      <p>{{ userinfo.withdrawFee }}元/笔</p>
    </div>
    <div class="xian"></div>
    <div class="item item-zfb" @click="binding">
      <P>绑定支付宝</P>
      <p class="rightColor">{{ text }}</p>
    </div>
  </div>
</template>
<script>
import { queryUserInfoApi, queryNewUserBankCardsApi } from "network/ApiServe";

export default {
  data() {
    return {
      userinfo: {},
      realnameStatus: [
        { type: "0", name: "实名中" },
        { type: "1", name: "已实名" },
        { type: "2", name: "实名失败" },
        { type: "3", name: "未实名" },
      ],
      text: "未绑定",
      NewBankCardCategory: [
        { type: 0, name: "充值卡" },
        { type: 2, name: "到账卡" },
        { type: 3, name: "支付宝" },
      ],
      NewBankCardType: [
        { type: 0, name: "贷记卡" },
        { type: 2, name: "借记卡" },
      ],
      NewBankCardCount: [
        { type: 1, name: "默认" },
        { type: 0, name: "所有" },
      ],
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
  },
  mounted() {
    this.getUserInfo();
    this.getbingzfb();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    getUserInfo() {
      queryUserInfoApi(this.token)
        .then((res) => {
          console.log(res);
          if ((res.resp_code = "000000")) {
            this.userinfo = res.result;
            if (res.result.idcard != null) {
              localStorage.setItem("idcard", res.result.idcard);
            }
            if (res.result.realname != null) {
              localStorage.setItem("realname", res.result.realname);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getbingzfb() {
      queryNewUserBankCardsApi(
        this.userId,
        this.NewBankCardCategory[2].type,
        this.NewBankCardType[0].type,
        this.NewBankCardCount[0].type
      )
        .then((res) => {
          console.log(res);
          if (res.resp_code === "000000") {
            if (res.result.cardNo != null) {
              this.text = res.result.cardNo;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    binding() {
      this.$router.push("/bindingzfb");
    },
  },
};
</script>
<style scoped>
.item {
  display: flex;
  justify-content: space-between;
  padding: 20px 18px 18px 20px;
  font-size: 15px;
  border-bottom: 1px solid #efefef;
  background-color: #fff;
}
.xian {
  height: 20px;
  background-color: #efefef;
}
.rightColor {
  color: red;
}
</style>
